/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-07-18 16:06:16
 * @filename : src/common/tips.js
 * @version : 
 * @description : 
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Animated,
    Easing
} from 'react-native';

let hide = true,
    type = 'error';//error,success,normal

class Tips extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text : '',
            num : new Animated.Value(this.getAnimatedStart())
        }
        //this.showTips({type:'test',msg:'ffsfdsafdsfa'});
    }

    animationFunc(start,end,time = 100) {
        Animated.timing(start, {
            toValue: end,
            duration: time, 
            easing: Easing.linear
        }).start();
    }

    getAnimatedStart() {
        let num = hide ? -120 : 0;
        return num;
    }

    showTips(obj) {
        console.log(obj);
        if (hide) {
            type = obj.type;
            this.setState({text:obj.msg})
            this.state.num.setValue(this.getAnimatedStart());
            this.animationFunc(this.state.num,0,500);
            hide  = false;
            let that = this;
            setTimeout(function(){
                that.hiddenTips();
            },3000);
        }
    }

    hiddenTips() {
        if (!hide) {
            this.state.num.setValue(this.getAnimatedStart());
            this.animationFunc(this.state.num,-120,500);   
            hide = true;
            type = '';
        }   
    }

    itemText(arr) {
        var items = [];
        for (let i in arr) {
            items[i] = (
                <Text key={i}  numberOfLines={2} style={styles.tipsErrors}> {arr[i]} </Text> 
            )
        }
        return items;
    }

    createDom() {
        let jsx = null;
        if (type == 'error') {
            jsx = <Text numberOfLines={2} style={styles.tipsError}> {this.state.text} </Text>;
        } else if (type == 'errors') {
            let item = this.itemText(this.state.text);
            jsx = <View>{item}</View>             
        } else if (type === 'success') {
            jsx = <Text numberOfLines={2} style={styles.tipsSuccess}> {this.state.text} </Text>;
        }
        return (jsx);
    }

    render() {
        
        let tipsDom = this.createDom();

        return (
            <Animated.View  style={[styles.tips,{top:this.state.num}]}>
                {tipsDom}
            </Animated.View>
        );
    }
}
let { width, height } = Utils.size;
const styles = StyleSheet.create({

    tips : {
        position:'absolute',
        top:0,
        left:0,
        justifyContent:'center',
     },

     tipsError : {
        width:width,
        color:'#fff',
        textAlign:'center',
        padding:5,
        lineHeight: 20,
        fontSize:14,
        backgroundColor: '#CE5589',
     },

     tipsErrors : {
        height:40,
        width:width,
        color:'#fff',
        textAlign:'left',
        paddingLeft:20,
        lineHeight: 30,
        fontSize:14,
        backgroundColor: '#CE5589',
     },

     tipsSuccess : {
        width:width,
        color:'#fff',
        textAlign:'center',
        padding:5,
        lineHeight: 20,
        fontSize:14,
        backgroundColor: '#29C23C',
     },
     

});

export default Tips;


